<template>
  <div id="app">
    <transition>
      <router-view></router-view>
    </transition>

    <!-- 底部区域 -->

    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item-lkx" to="/home">
        <span class="mui-icon homediy"></span>
        <span class="mui-tab-label">
          <img src="./assets/gb.png" alt="color">
        </span>
      </router-link>
      <router-link class="mui-tab-item-lkx" to="/dataview">
        <span class="mui-icon dataview"></span>
        <span class="mui-tab-label">
          <img src="./assets/gb.png" alt="color">
        </span>
      </router-link>
      <router-link class="mui-tab-item-lkx" to="/maintenance">
        <span class="mui-icon maintenance"></span>
        <span class="mui-tab-label">
          <img src="./assets/gb.png" alt="color">
        </span>
      </router-link>
      <router-link class="mui-tab-item-lkx" to="/sw">
        <span class="mui-icon sw"></span>
        <span class="mui-tab-label">
          <img src="./assets/gb.png" alt="color">
        </span>
      </router-link>
      <router-link class="mui-tab-item-lkx" to="/kf">
        <span class="mui-icon kf"></span>
        <span class="mui-tab-label">
          <img src="./assets/gb.png" alt="color">
        </span>
      </router-link>
    </nav>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="scss">

#app {
  font-family: "Microsoft YaHei", "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-top: 0.6rem;
}
.mint-header {
  z-index: 99;
  height: 0.63rem;
  background: #424578;
}
.mint-header-title {
  font-size: 0.16rem;
}

/* 改类名解决tabbar无法切换的问题 修改与tab-item类相关的*/

.mui-tab-label {
  position: relative;
  width: 100%;
  height: 0.14rem;
}

.router-link-active .mui-tab-label img {
  position: absolute;
  left: 0px;
  bottom: -3px;
  width: 100%;
  height: 0.18rem;
}

.mui-bar-tab .mui-tab-item-lkx {
  display: table-cell;
  overflow: hidden;
  width: 1%;
  height: 0.5rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #929292;
}
.mui-bar-tab .mui-tab-item-lkx .mui-icon {
  top: 0.13rem;
  width: 0.6rem;
  height: 0.6rem;
  padding-top: 0;
  padding-bottom: 0;
}
/* 自定义图标 */
.mui-bar-tab .mui-tab-item-lkx {
  .homediy {
    background: url("./assets/sy1.png") no-repeat center;
  }
  .dataview {
    background: url("./assets/sj.png") no-repeat center;
  }
  .maintenance {
    background: url("./assets/wb.png") no-repeat center;
  }
  .sw {
    background: url("./assets/sw.png") no-repeat center;
  }
  .kf {
    background: url("./assets/kf.png") no-repeat center;
  }
}
// 选中状态图标
.mui-bar-tab .router-link-active {
  .homediy {
    background: url("./assets/sy.png") no-repeat center;
  }
  .dataview {
    background: url("./assets/sj1.png") no-repeat center;
  }
  .maintenance {
    background: url("./assets/wb1.png") no-repeat center;
  }
  .sw {
    background: url("./assets/sw1.png") no-repeat center;
  }
  .kf {
    background: url("./assets/kf1.png") no-repeat center;
  }
}
.mui-bar-tab {
  color: #283351;
}
.mui-bar-tab .mui-tab-item-lkx .mui-icon ~ .mui-tab-label {
  font-size: 0.11rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
